<template>
    <div id="classify">
        <van-nav-bar title="分类"/>
        <van-row type="flex">
            <div class="aside">
                <van-sidebar v-model="activeKey" class="nav">
                    <van-sidebar-item :title="cls" to="" v-for="(cls,index) in classify" :key="index"/>
                </van-sidebar>
            </div>
            <div class="right">
                <div class="content">
                    <van-grid :border="false" :column-num="2">
                        <van-grid-item to="commoditypage" v-for="(goods,index) in goodslist" :key="index">
                            <van-image :src="'../../../static/img/'+goods.img" class="pic"/>
                            <span>￥{{goods.price}}</span>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>
        </van-row>
        <bottom/>
    </div>
</template>
<script>
export default {
    data(){
        return {
            classify:['休闲鞋','运动鞋','凉鞋','单鞋','老爹鞋','拖鞋','商务鞋','小白鞋'],
            goodslist: [
                {
                    id: 1,
                    img: "goodsdemo.jpg",
                    price: "996"
                },
                {
                    id: 2,
                    img: "goodsdemo.jpg",
                    price:"888"
                },
                {
                    id: 3,
                    img: "goodsdemo.jpg",
                    price: "846"
                },
                {
                    id: 4,
                    img: "goodsdemo.jpg",
                    price: "698"
                },
                {
                    id: 5,
                    img: "goodsdemo.jpg",
                    price:"986"
                },
                {
                    id: 6,
                    img: "goodsdemo.jpg",
                    price:"999"
                },
                {
                    id: 7,
                    img: "goodsdemo.jpg",
                    price:"233"
                },
                {
                    id: 8,
                    img: "goodsdemo.jpg",
                    price:"666"
                }
            ],
            activeKey: 0,
            active:0,
        }
    },
    methods:{
        
    }
}
</script>

<style scoped>
#classify{
    margin-top: 1.226667rem;
}
.van-nav-bar .van-icon {
    color:white;
}
.van-nav-bar {
    background-color: #ff6341;
	position: fixed;
    width: 100%;
    height: 1.226667rem;
    top: 0;
    left: 0;
}
.van-nav-bar__title{
    color:white;
}
.nav{
    margin-top: .533333rem;
    text-align:center;
}
.tag{
    display:flex;
    justify-content: space-around;
    margin: 0 2.5rem;
}
.pic{
    width:3rem;
    height:3rem;
}
.content{
    margin-bottom:1rem;
}
</style>


